<template>
  <div style="margin-top: 60px;">
    <h1>千锋在线直播教育平台-教师端</h1>

    <div class="login_div">
      <el-form ref="form" :model="form">
        <el-form-item label="邮箱" label-width="80px" style="text-align: start;">
           <el-input v-model="form.email" style="width: 60%;"></el-input>
           <el-button @click="sendCode">发送验证码</el-button>
        </el-form-item>
        <el-form-item label="验证码" label-width="80px" style="text-align: start;">
          <el-input v-model="form.code" style="width: 40%;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onLogin">登录</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
   export default {
      data() {
        return {
          form: {
            email: '',
            code: '',
            fromType: 1
          }
        }
      },
      methods: {
        onLogin(){
          console.log("进行登录！");
          // 发送请求给后端，进行登录逻辑的处理.....
          this.$.ajax({
            url: "/auth/sys/login",
            data: this.form,
            success: (data) => {
              console.log(data);
              //保存用户的令牌数据到客户端
              this.$.saveUserToken(data);
              //跳转到首页
              this.$message.success("登录成功！");
              this.$router.push("/Index");
            }
          });
        },
        sendCode(){
          console.log("发送验证码");
          this.$.ajax({
            url: "/auth/code/email",
            data: {
              email: this.form.email
            },
            success: (data) => {
              console.log(data);
              this.$message.success("验证码发送成功！");
            }
          });
        }
      }
    }
</script>

<style scoped="scoped">
  .login_div {
    width: 30%;
    padding: 20px;
    margin: 0px auto;
    margin-top: 100px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  }
</style>
